<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<style>
	input[type="number"] {
	   width:70px;
	}
	#container{
		position: relative;
		min-height: 500px;
		height:auto;
		width: 1000px;
		display:inline-block;
		}
	#uploadProductLine {
		height:auto;
		margin-left:175px;
		margin-top:30px;
		display:inline-block;
	}
	h2{
		margin-left:200px;
	}
</style>

<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="javascript/select.js"></script>
<script language="javascript" type="text/javascript">  
$(document).ready(function(){

var Woman = [
	{display: "--Please Select--", value: "" }, 
    {display: "T-Shirts/Tanks", value: "T-Shirts/Tanks" }, 
    {display: "Sweaters", value: "Sweaters" }, 
    {display: "Jackets", value: "Jackets" },
    {display: "Dresses", value: "Dresses" },
    {display: "Skirts", value: "Skirts" },
    {display: "Pants", value: "Pants" }, 
    {display: "Sweaters", value: "Sweaters" }, 
    {display: "Shorts", value: "Shorts" },
    {display: "Leggins", value: "Leggins" },
    {display: "Others", value: "Others" }
    ];

var Man = [
	{display: "--Please Select--", value: "" }, 
    {display: "Shirts", value: "Shirts" }, 
    {display: "Sweaters", value: "Sweaters" }, 
    {display: "Jackets", value: "Jackets" },
    {display: "Pants", value: "Pants" },
    {display: "Shorts", value: "Shorts" }, 
    {display: "Others", value: "Others" }, 
    {display: "Tank Tops", value: "Tank Tops" },
    {display: "T-Shirts", value: "T-Shirts" }
    ];

    
var Kid = [
	{display: "--Please Select--", value: "" }, 
    {display: "Girls", value: "Girls" }, 
    {display: "Boys", value: "Boys" }
 ];

var TShirtsTanks =[
      {display:"Sleeveless", value:"Sleeveless"},
      {display:"Crop Tops", value:"Crop Tops"},
      {display:"Short sleeve", value:"Short sleeve"},
      {display:"Long sleeve", value:"Long sleeve"}
                 ];

var Shirts =[
                {display:"Sleeveless", value:"Sleeveless"},
                {display:"Crop Tops", value:"Crop Tops"},
                {display:"Short sleeve", value:"Short sleeve"},
                {display:"Long sleeve", value:"Long sleeve"}
                                            ];

var Sweaters =[
             {display:"Pullovers", value:"Pullovers"},
             {display:"Cardigans", value:"Cardigans"},
             {display:"Sweaters", value:"Sweaters"}
];

var Jackets =[
               {display:"Coats", value:"Coats"},
               {display:"Jackets", value:"Jackets"}
  ];

var Dresses_Skirts =[
              {display:"Mini", value:"Mini"},
              {display:"Mid-length", value:"Mid-length"},
              {display:"Long", value:"Long"}
 ];
 
var Pants =[
              {display:"suit", value:"suit"},
              {display:"Jeans", value:"Jeans"},
              {display:"High waisted", value:"High waisted"},
              {display:"Jumpsuits", value:"Jumpsuits"},
              {display:"Low rise", value:"Low rise"},
              {display:"Chinos", value:"Chinos"},
              {display:"Sweatpants", value:"Sweatpants"}
 ];
 
var Girls =[
            {display:"Baby girls", value:"Baby girls"},
            {display:"Girls", value:"Girls"}
];

var Boys =[
            {display:"Boys", value:"Boys"},
            {display:"Baby boys", value:"Baby boys"}
];

var Others =[
            {display:"Nightwear", value:"Nightwear"},
            {display:"Sportswear", value:"Sportswear"},
            {display:"Swimwear", value:"Swimwear"},
            {display:"Underwear", value:"Underwear"}
];

var Accessories =[
            {display:"Headwear", value:"Headwear"},
            {display:"Eyewear", value:"Eyewear"},
            {display:"Bags", value:"Bags"},
            {display:"Socks", value:"Socks"},
            {display:"Leather", value:"Leather"}
];

var TShirts =[
                  {display:"Short sleeve", value:"Short sleeve"},
                  {display:"Long sleeve", value:"Long sleeve"}
      ];


var Neutral = [
               {display:"Accessories", value:"Accessories"}
       ];

//If Gender option is changed
$("#genderselected").change(function() {
        var parent = $(this).val(); //get option value from parent 
        
        switch(parent){ //using switch compare selected option and populate child
              case 'Woman':
                list(Woman);
                break;
              case 'Man':
                list(Man);
                break;              
              case 'Kid':
                list(Kid);
                break;  
              case 'Neutral':
                  list(Neutral);
                  list2(Accessories);
                  break;                 
            default: //default child option is blank
                $("#categoryselected").html('');  
      	        $("#typeselected").html('');  
                break;
           }
});


//If Category option is changed
$("#categoryselected").change(function() {
        var parent = $(this).val(); //get option value from parent 
        
        switch(parent){ //using switch compare selected option and populate child
              case 'T-Shirts/Tanks':
                list2(TShirtsTanks);
                break;
              case 'Shirts':
                list2(Shirts);
                break;              
              case 'Sweaters':
                list2(Sweaters);
                break;  
              case 'Jackets':
                  list2(Jackets);
                  break;           
              case 'Dresses':
                  list2(Dresses_Skirts);
                  break;
                case 'Skirts':
                  list2(Dresses_Skirts);
                  break;              
                case 'Pants':
                  list2(pants);
                  break;  
                case 'Girls':
                    list2(Girls);
                    break;   
                case 'Boys':
                    list2(Boys);
                    break;
                  case 'Others':
                    list2(Others);
                    break;              
                  case 'Accessories':
                    list2(Accessories);
                    break;  
                  case 'T-Shirts':
                      list2(TShirts);
                      break;   
            default: //default child option is blank
                $("#typeselected").html('');  
                break;
           }
});

//function to populate child select box
function list(array_list)
{
    $("#categoryselected").html(""); 
    $(array_list).each(function (i) {
        $("#categoryselected").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
        
    });
    $("#typeselected")
    .find("option")
    .remove()
    .end();
}

function list2(array_list2)
{
	
    $("#typeselected").html(""); 
    $(array_list2).each(function (i) {
        $("#typeselected").append("<option value=\""+array_list2[i].value+"\">"+array_list2[i].display+"</option>");
    });
}

});
</script>


<div id="container">
	<div id="uploadProductLine">
		<img width="625" height="80" src="./logos/step1.jpg" />
		<s:actionerror/>
		<s:form action="uploadProductLine">
			<s:hidden key="designername" value="%{#session.login}" />
			<s:textfield label="Name" key="name"/>
			<s:select label="Gender" key="genderselected"  id="genderselected" list="#{'':'--Please Select--', 'Woman':'Woman', 'Man':'Man', 'Kid':'Kid', 'Neutral':'Neutral'}"  />
			<s:select label="Category" key="categoryselected" id="categoryselected" list="#{}"/>
			<s:select label="Type" key="typeselected" id="typeselected" list="#{}"/>
			<s:select label="Season" key="seasonselected" list="#{'':'--Please Select--', 'Spring':'Spring', 'Summer':'Summer', 'Autumn':'Autumn', 'Winter':'Winter'}" />
			<s:textarea label="Description" key="description" cols="40" rows="10"/>
			<s:textfield label="Price" key="price"/>			
			<s:submit value="Next" align="left"/>
		</s:form> 
	</div>
</div>